<template>
    <div>
        <h1>这啥也不是</h1>
        <ol>
            <li>第一：{{}}描值语法</li>
            <li>num:{{num}}</li>
        </ol>

        <p v-for="(item,index) in arr" :key="index">{{item}}</p>

        <hr/>

        <p v-for="(item,index) in obj" :key="item">{{index}}---{{item}}</p>

        <hr/>

        <p>{{arrobj}}</p>

        <ul>
            <li v-for="(item,index) in arrobj" :key="item.id">
                {{item.name}}---{{item.age}}
            </li>
        </ul>
        <input type="button" class="btn btn-danger" value="修改数据" v-on:click="fn">
        <input type="button" class="btn btn-danger" value="修改数组" v-on:click="fn1">
        <input type="button" class="btn btn-danger" value="修改数组" v-on:click="fn2">
        <input type="button" class="btn btn-danger" value="修改数据" v-on:click="fn3">
    </div>

    <hr/>

    <div>
        <table class="table table-bordered">
            <tbody >
                <tr>
                    <td>ID</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>婚否</td>
                    <td>操作</td>
                </tr>
                <tr v-for="(item,index) in arrobjject" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.marry}}</td>
                    <td>操作</td>
                </tr>
            </tbody>
        </table>

        <hr/>
        <select>
            <option value="">请选择</option>
            <option v-bind:value="item.id" v-for="item in city" :key="item.id">{{item.name}}</option>
        </select>
    </div>
</template>

<script setup lang="ts">
//v-on:表示绑定事件  v-onclick（事件类型）
//v-for:表示循环 v-for="item in 变量"  item表示数组或对象中的元素  Index表示索引值
//v-bind: 单独使用时表示绑定属性  v-bind:value="item.id"  绑定属性值
import { reactive, ref } from 'vue'
const num = ref(101);

let arr = reactive(['oioioioo',2,3,4,6]);

let obj = reactive({
    name:'张三',
    age:18
})

let arrobj = reactive([
    {id:1,name:'张三',age:18},
    {id:2,name:'李四',age:19},
    {id:3,name:'王五',age:20},
    {id:4,name:'赵六',age:21},
    {id:5,name:'七万',age:22}
])

let arrobjject = reactive([
    {id:1,name:'张三',age:18,marry:false},
    {id:2,name:'李四',age:19,marry:false},
    {id:3,name:'王五',age:20,marry:false},
    {id:4,name:'张六',age:21,marry:false},
    {id:5,name:'张七',age:27,marry:true},
])

let city = reactive([
    {id:1,name:'北京'},
    {id:2,name:'河北'},
    {id:3,name:'山西'},
    {id:4,name:'河南'},
    {id:5,name:'深圳'},
])
const fn = () => {
    num.value++;

    console.log(num.value);
    
}

const fn1 = () => {
    arr[2] = 100;
}

const fn2 = () => {
    obj.name = '李四';
    obj.age = 20;
}

const fn3 = () => {
    arrobj[0].name = '李四';
    arrobj[0].age = 20;
}
</script>

<style scoped>

</style>